import React from 'react';
import { Collapse } from 'antd';

import styles from './index.module.less';

export default class HelpHome extends React.Component {
  render() {
    return (
      <div className={styles.helpHomeBox}>
        <div className={`${styles.cardBox} ${styles.clearfix}`}>
          <div className={styles.cardItem}>
            <div className={styles.itemIconBox}>
              <i className={`iconfont icon-dianhua ${styles.icon}`}></i>
            </div>
            <div className={styles.itemTextBox}>
              <div className={styles.title}>
                客服电话
              </div>
              <div className={styles.serviceTel}>
                400-681-6018
              </div>
              <div className={styles.normalText}>
                周一至周日 9:30-17:00
              </div>
            </div>
          </div>
          <div className={styles.cardItem}>
            <div className={styles.itemIconBox}>
              <i className={`iconfont icon-zaixiankefu ${styles.icon}`}></i>
            </div>
            <div className={styles.itemTextBox}>
              <div className={styles.title}>
                在线客服
              </div>
              <div className={`${styles.normalText} ${styles.serviceText}`}>
                业务在线咨询
              </div>
              <div className={`${styles.normalText} ${styles.serviceText}`}>
                卖家专线咨询
              </div>
              <div className={`${styles.normalText} ${styles.serviceText}`}>
                买家专线咨询
              </div>
            </div>
          </div>
          <div className={`${styles.cardItem} ${styles.lastItem}`}>
            <div className={styles.itemIconBox}>
              <i className={`iconfont icon-jianyifankui ${styles.icon}`}></i>
            </div>
            <div className={styles.itemTextBox}>
              <div className={styles.title}>
                建议反馈
              </div>
              <div className={styles.adviceText}>
                我们渴望您的建议
              </div>
              <button className={styles.adviceBtn}>
                立即发起
              </button>
            </div>
          </div>
        </div>
        <div className={styles.searchBox}>
          <div className={`${styles.inputBtnBox} ${styles.clearfix}`}>
            <input className={styles.searchInput} placeholder='请输入搜索关键字' type='text' />
            <button className={styles.searchBtn}>搜索</button>
          </div>
        </div>
        <div className={styles.problemBox}>
          <div className={styles.problemTitle}>
            常见问题
          </div>
          <Collapse accordion bordered={false}>
            <Collapse.Panel header='如何入住丰收部落平台？' key='1'>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque dicta dolorem expedita fugiat libero minus perspiciatis veritatis. Amet et laudantium obcaecati officiis vel. Assumenda ducimus enim nisi praesentium, ratione unde?
            </Collapse.Panel>
            <Collapse.Panel header="如何在丰收部落进行交易？" key='2'>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque dicta dolorem expedita fugiat libero minus perspiciatis veritatis. Amet et laudantium obcaecati officiis vel. Assumenda ducimus enim nisi praesentium, ratione unde?
            </Collapse.Panel>
            <Collapse.Panel header='卖家如何开店？' key='3'>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque dicta dolorem expedita fugiat libero minus perspiciatis veritatis. Amet et laudantium obcaecati officiis vel. Assumenda ducimus enim nisi praesentium, ratione unde?
            </Collapse.Panel>
            <Collapse.Panel header='买家如何支付订单？' key='4'>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque dicta dolorem expedita fugiat libero minus perspiciatis veritatis. Amet et laudantium obcaecati officiis vel. Assumenda ducimus enim nisi praesentium, ratione unde?
            </Collapse.Panel>
            <Collapse.Panel header='申请了退货，为什么一直没退款？' key='5'>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque dicta dolorem expedita fugiat libero minus perspiciatis veritatis. Amet et laudantium obcaecati officiis vel. Assumenda ducimus enim nisi praesentium, ratione unde?
            </Collapse.Panel>
          </Collapse>
        </div>
      </div>
    );
  }
}
